import React, { Component } from "react";

export default class Video extends Component {
  state = {
    list: [
      {
        id: 1,
        name: "这是第一个列表",
      },
      {
        id: 2,
        name: "这是第二个列表",
      },
      {
        id: 3,
        name: "这是第三个列表",
      },
      {
        id: 4,
        name: "这是第四个列表",
      },
    ],
    arr: [
      {
        id: 1,
        name: "这是第一个列表",
      },
      {
        id: 2,
        name: "这是第二个列表",
      },
      {
        id: 3,
        name: "这是第三个列表",
      },
      {
        id: 4,
        name: "这是第四个列表",
      },
    ],
    myRef: React.createRef(),
  };
  render() {
    return (
      <section>
        <div>
          <input type="text" ref={this.state.myRef} />
          <button onClick={this.handleClick.bind(this)}>点击过滤</button>
        </div>
        <div>
          {this.state.list.map((item) => (
            <div key={item.id}>{item.name}</div>
          ))}
        </div>
      </section>
    );
  }
  handleClick() {
    let newList = this.state.arr.filter((item) =>
      item.name.includes(this.state.myRef.current.value)
    );
    this.setState({
      list: newList,
    });
    this.state.myRef.current.value = "";
  }
}
